<template>
    <div class="login">
      <div class="mylogin" align="center">
        <h4>登录</h4>
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          label-width="0px"
        >
          <el-form-item label="" prop="username" style="margin-top: 10px">
            <el-row>
              <el-col :span="2">
                <span class="el-icon-s-custom"></span>
              </el-col>
              <el-col :span="22">
                <el-input
                  class="inps"
                  placeholder="账号"
                  v-model="loginForm.username"
                >
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-row>
              <el-col :span="2">
                <span class="el-icon-lock"></span>
              </el-col>
              <el-col :span="22">
                <el-input
                  class="inps"
                  type="password"
                  placeholder="密码"
                  show-password
                  v-model="loginForm.password"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item style="margin-top: 55px">
            <el-button type="primary" round class="submitBtn" @click="submitForm"
              >登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>

<script>
import { mapMutations } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "Login",
  data () {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
 
  methods: {
    ...mapMutations(["changeLogin"]),
    submitForm() {
      const userAccount = this.loginForm.username;
      const userPassword = this.loginForm.password;
      if (!userAccount) {
        return this.$message({
          type: "error",
          message: "账号不能为空！",
        });
      }
      if (!userPassword) {
        return this.$message({
          type: "error",
          message: "密码不能为空！",
        });
      }
      console.log("用户输入的账号为：", userAccount);
      console.log("用户输入的密码为：", userPassword);
 
          this.$http
            .post("/inoculations/admin/login", this.loginForm)
            .then((res) => {
              if (res.statusCode == "200") {
                localStorage.setItem("token", res.data.userToken);
                ElMessage({
                  message: "登录成功！",
                  type: "success",
                });
                this.$router.push("/home");
              } else if(res.statusCode == "500") {
                ElMessage.error("账号或密码错误！");
              }
            })
            .catch(() => {
              ElMessage.error("登录失败！");
            });
      
    },
  },
};
</script>

<style scoped>
  .login {
    width: 100vw;
    padding: 0;
    margin: 0;
    height: 100vh;
    font-size: 18px;
    background-position: left top;
    background-color: #3b3e6b;
    color: #fff;
    font-family: "Source Sans Pro";
    position: relative;
  }
 
  .mylogin {
    width: 210px;
    height: 240px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 50px 40px 40px 40px;
    box-shadow: -15px 15px 15px rgba(74, 92, 139, 0.7);
    opacity: 1;
    background: linear-gradient(
      230deg,
      rgba(53, 57, 74, 0) 0%,
      rgb(0, 0, 0) 100%
    );
  }
 
  .inps input {
    border: none;
    color: #fff;
    background-color: transparent;
    font-size: 12px;
  }
 
  .submitBtn {
    background-color: transparent;
    color: #39f;
    width: 200px;
  }
</style>